<template>
  <a-modal :title="title"
           :visible="visible"
           width="600px"
           @cancel="handleCancel"
           :footer="null">
    <div class="content">
      <div class="setNextWeek">
        <a-button v-if="isShow"
                  type="primary"
                  @click="handleTop">
          上周
        </a-button>
        <a-button v-else
                  type="primary"
                  @click="handleNext">
          下周
        </a-button>
      </div>
      <div class="container">
        <div class="appointment-time-list">
          <div class="column">
            <div class="item"
                 v-for="(item,index) in weekDate">
              <div class="item-time">
                <span>{{item.showDate}}</span>
                <span>{{index | formatWeek}}</span>
                <span>{{item.type | formatType}}</span>
              </div>
              <div :class="item.status==1?'item-status blue':'item-status pink'">{{item.status | formatStatus}}</div>
            </div>
          </div>
          <div class="column">
            <div class="item"
                 v-for="(item,index) in weekDate2">
              <div class="item-time">
                <span>{{item.showDate}}</span>
                <span>{{index | formatWeek}}</span>
                <span>{{item.type | formatType}}</span>
              </div>
              <div :class="item.status==1?'item-status blue':'item-status pink'">{{item.status | formatStatus}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getWorkingCalendarList } from '@/api/manage'
import { formatDateDay } from '@/utils/util'

export default {
  data() {
    return {
      visible: false,
      title: null,
      model: {
        escortId: null,
        startTime: null,
      },
      weekDate: [],
      weekDate2: [],
      time: null,   // 当前时间
      dateList: [],
      timestamp: null,
      dateTime: [],
      isShow: false
    };
  },
  created() { },
  filters: {
    formatWeek(val) {
      if (val == 0) {
        return '周一'
      } else if (val == 1) {
        return '周二'
      } else if (val == 2) {
        return '周三'
      } else if (val == 3) {
        return '周四'
      } else if (val == 4) {
        return '周五'
      } else if (val == 5) {
        return '周六'
      } else if (val == 6) {
        return '周日'
      }
    },
    formatType(type) {
      if (type == 0) {
        return '上午'
      } else if (type == 1) {
        return '下午'
      }
    },
    formatStatus(type) {
      if (type == 0) {
        return '工作'
      } else if (type == 1) {
        return '休息'
      }
    },
  },
  methods: {
    detail(data) {
      this.visible = true
      this.model.escortId = data.id
      let date = formatDateDay(Date.now())  // 年月日
      this.time = date
      let now = new Date(this.time)
      this.timestamp = now.getTime()
      // this.model.startTime = this.time
      this.getWeekData(this.time)
      console.log('当前时间', this.time);
      console.log('当前时间戳', this.timestamp);
      this.title = "工作日历"
    },
    // 获取周数据
    getWeekData(day) {
      this.weekDate = []
      this.weekDate2 = []
      this.dateTime = []
      let weekDate = []
      // 一天里一共的毫秒数
      let oneDayTime = 1000 * 60 * 60 * 24
      let today = new Date(day)
      // 若那一天是周末时，则强制赋值为7
      let todayDay = today.getDay() || 7
      let startDate = new Date(
        today.getTime() - oneDayTime * (todayDay - 1)
      )
      for (let i = 0; i < 7; i++) {
        let temp = new Date(startDate.getTime() + i * oneDayTime)
        // let year = temp.getFullYear()
        let month = temp.getMonth() + 1
        let day = temp.getDate()
        if (day < 10) {
          day = '0' + day
        }
        weekDate[i] = `${month}-${day}`
      }
      for (let i = 0; i < 7; i++) {
        let temp = new Date(startDate.getTime() + i * oneDayTime)
        let year = temp.getFullYear()
        let month = temp.getMonth() + 1
        let day = temp.getDate()
        // let h = temp.getHours();
        // let mm = temp.getMinutes();
        // let s = temp.getSeconds();
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        this.dateTime[i] = `${year}-${month}-${day}`
      }
      weekDate.forEach((item, index) => {
        this.weekDate.push({
          workingDate: this.dateTime[index],
          showDate: item,
          status: 1,  // 休息
          type: 0
        })
        this.weekDate2.push({
          workingDate: this.dateTime[index],
          showDate: item,
          status: 1,  // 休息
          type: 1
        })
      })
      console.log('周-上午', this.weekDate)
      console.log('周-下午', this.weekDate2)
      console.log('周日期', weekDate)
      console.log('周日期2', this.dateTime)
      if (!this.isShow) {
        this.model.startTime = this.dateTime[0]
      }
      this.getWorkingCalendarList()
    },
    // 设置下周
    handleNext() {
      this.isShow = true
      let date = new Date(new Date(this.dateTime[6]).getTime() + 24 * 60 * 60 * 1000)
      let dayDate = formatDateDay(date)
      this.getWeekData(dayDate)
    },
    // 设置上周
    handleTop() {
      this.isShow = false
      let date = new Date(new Date(this.dateTime[0]).getTime() - 24 * 60 * 60 * 1000)
      let dayDate = formatDateDay(date)
      this.getWeekData(dayDate)
    },
    // 取消
    handleCancel() {
      this.visible = false
      this.isShow = false
      this.$emit('ok')
    },
    // 获取工作日历
    getWorkingCalendarList() {
      getWorkingCalendarList(this.model).then(res => {
        this.dateList = res.result
        console.log('工作日历数据', res);
        this.getDayStatus()
      })
    },
    // 工作日历状态
    getDayStatus() {
      this.dateList.forEach(item => {
        this.weekDate.forEach(sitem => {
          if (item.showDate == sitem.showDate && item.type == sitem.type) {
            sitem.status = 0
          }
        })
        this.weekDate2.forEach(pitem => {
          if (item.showDate == pitem.showDate  && item.type == pitem.type) {
            pitem.status = 0
          }
        })
      })
    },
  },
};
</script>

<style scoped>
.setNextWeek {
  text-align: right;
}
.container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.appointment-time-list {
  width: 450px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.column {
  display: flex;
  flex-direction: column;
}
.appointment-time-list .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  width: 190px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 15px;
}
.item .item-time {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  width: 72%;
  color: gray;
}
.item .item-time span:nth-child(2) {
  margin: 0 8px;
}
.item-status {
  width: 28%;
  height: 28px;
  line-height: 28px;
  color: #ffffff;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.pink {
  background: #ed7e7e;
}
.blue {
  background: #0058a0;
}
</style>